<template>
    <el-row class="tac">
        <el-col style="width: 200px;">
            <div class="demo-basic--circle" @click="toUser">
                <div class="block">
                    <el-avatar shape="circle" :size="80"
                               src="https://zhtj.youth.cn/zhtj/static/img/boy.png">
                    </el-avatar>
                </div>
                <span class="hostname">{{users.name}}</span>
            </div>

            <el-menu
                    class="el-menu-vertical-demo"
                    background-color="#fff"
                    active-text-color="#df1717"
                    default-active="/Home"
                    router>

                <el-menu-item :index="'/'+item.menuClick" v-for="(item,i) in menu" :key="i">
                    <i :class="item.menuIcon"></i>
                    <span slot="title">{{item.menuName}}</span>
                </el-menu-item>


            </el-menu>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "Aside",
        data() {
            return {
                users: JSON.parse(sessionStorage.getItem('CurUser')),
                headImg: '',
            }
        },
        computed: {
            "menu": {
                get() {
                    return this.$store.state.menu
                }
            }
        },
        created() {
            const users = JSON.parse(sessionStorage.getItem("CurUser"));
            if (users.sex === 1) {
                this.headImg = "https://zhtj.youth.cn/zhtj/static/img/boy.png";
            } else {
                this.headImg = "https://zhtj.youth.cn/zhtj/static/img/girl.png";
            }
        },
        methods: {
            toUser() {
                console.log('to_user');
                this.$router.push("/Home")
            },
        }
    }
</script>

<style scoped>
    .el-menu div {
        line-height: 150px;
        text-align: center;
        background-color: #df1717
    }

    .demo-type {
        align-items: center;
    }

    .demo-basic--circle {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 150px;
        justify-content: center
    }

    .block {
        display: inline-block;
    }

    .hostname {
        color: #fff
    }

</style>